<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <base th:href="|${#httpServletRequest.getContextPath()}/|"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/index.css"/>
    <title>Live Video Spider</title>
  </head>
  <body>
    <h2>Welcome to Live Video Spider!</h2>
    <div class="container-fluid">
        <h6>在下面输入框中输入直播平台网址（如https://www.huya.com/g/huwai），即可获取到该网页上的直播列表。</h6>
        <h6>目前支持斗鱼、虎牙、熊猫三大直播平台</h6>
        <form action="rooms" class="form-group">
            <div class="input-group">
	            <input type="text" class="form-control" name="url" th:value="${url}" placeholder="输入直播平台网址进行搜索"/>
	            <span class="input-group-append">
	               <input type="submit" class="btn btn-info" value="搜索"/>
	            </span>
            </div>
        </form>
        <p class="error" th:if="${errMsg}" th:text="${errMsg}"></p>
	    <ul class="room-list" th:if="${not #lists.isEmpty(rooms)}">
	        <li class="list-item" th:each="room: ${rooms}">
	            <a class="img" th:href="${room.roomUrl}" title="进入直播间" target="_blank">
	               <img th:src="${room.imgUrl}" th:alt="${room.roomTitle}" th:title="${room.roomTitle}" width="305"/>
                   <span class="img-mask"></span>
	            </a>
	            <p>
	               <a class="title ellipsis" target="_blank" th:href="${room.roomUrl}" th:text="${room.roomTitle}" th:title="${room.roomTitle}"></a>
	               <span class="heats">人气：<strong th:text="${room.heats}"></strong></span>
	            </p>
                <a class="anchor" target="_blank" th:href="${room.roomUrl}" th:text="${room.anchorName}"></a>
	        </li>
	    </ul>
    </div>
  </body>
</html>